<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--<meta charset="UTF-8">-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title</title>
    <style type = "text/css">
        div,span,p{
            width:140px;
            height:140px;
            border:1px solid black;
            margin:5px;
            background:#aaa;
            float:left;
            font-size:17px;
            font-family:Verdana;
        }

        div.mini{
            width:55px;
            height:55px;
            background:#aaa;
            font-size:12px;
        }

        div.hide{
            display:none;
        }
    </style>
    <script type ="text/javascript" src = "../jquery-1.7.2.js"></script>
    <script type = "text/javascript">
        $(document).ready(function(){
            function amateIt(){
                $("#mover").slideToggle("slow",amateIt);
            }
            amateIt();
        })


        $(function(){
            $("#btn1").click(function(){
                $("div:first").css("background-color","#bbffaa");    //内部的为什么不算？？？？？？？？？？？？？？
            });

            $("#btn2").click(function(){
                $("div:last").css("background-color","#bbffaa");
            });

            $("#btn3").click(function(){
                $("div:not(.one)").css("background-color","#bbffaa");
            });

            $("#btn4").click(function(){
                $("div:even").css("background-color","#bbffaa");
            });
            $("#btn5").click(function(){
                $("div:odd").css("background-color","#bbffaa");
            });
            $("#btn6").click(function(){
                $("div:gt(3)").css("background-color","#bbffaa");
            });
            $("#btn7").click(function(){
                $("div:eq(3)").css("background-color","#bbffaa");
            });
            $("#btn8").click(function(){
                $("div:lt(3)").css("background-color","#bbffaa");
            });
            $("#btn9").click(function(){
                $(":header").css("background-color","#bbffaa");
            });
            $("#btn10").click(function(){
                $(":animated").css("background-color","#bbffaa");
            });
            $("#btn11").click(function(){
                $("div:not(:animated):last").css("background-color","#bbffaa");
            });
        });
    </script>
</head>
<body>
<h2>基本过滤器</h2>
<input type="button" value="选择第一个 div 元素" id="btn1" />
<input type="button" value="选择最后一个 div 元素" id="btn2" />
<input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
<input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
<input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
<input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
<input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
<input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
<input type="button" value="选择所有的标题元素" id="btn9" />
<input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />
<input type="button" value="选择没有执行动画的最后一个div" id="btn11" />
<br>
<div id ="one" class = "one">
    id为one，class为one的div
    <div class = "mini">class为mini</div>
</div>

<div id = "two" class = "one" titlle = "test">
    id为two，class为one，tittle为test的div
    <div class = "mini" tittle = "other">class为mini，tittle为other</div>
    <div class = "mini" tittle = "test">class为mini，tittle为test</div>
</div>
<div class = "one">
    <div class = "mini">class为mini</div>
    <div class = "mini">class为mini</div>
    <div class = "mini">class为mini</div>
    <div class = "mini"></div>
</div>
<div class = "one">
    <div class = "mini">class为mini</div>
    <div class = "mini">class为mini</div>
    <div class = "mini">class为mini</div>
    <div class = "mini" tittle = "tesst">class为mini，tittle为tesst</div>
</div>

<div style = "display:none" class = "none">display为none的div</div>

<div class = "hide">class为hide的div</div>

<div>
    包含input的type为hidde的div
    <input type ="hidden" size = "8"/>
</div>
<div id = "mover">正在执行的动画。。。</div>
</body>
</html>